<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#wrap{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 0 auto;
            position: relative;
        }
	</style>
</head>
<body>
	<div id="wrap"></div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
	var maxWidth = $("#wrap").innerWidth();
	var maxHeight = $("#wrap").innerHeight();
	function randFn(min,max){
        return Math.round(Math.random()*(max-min))+min;
    }

    function createDiv(){
    	var d = $("<div></div>");
    	var s = randFn(30,60);
    	var l = randFn(0,maxWidth-s);
    	var t = randFn(0,maxHeight-s);
    	var red = randFn(0,255);
    	var green = randFn(0,255);
    	var blue = randFn(0,255);
    	var c = "rgb("+red+","+green+","+blue+")";
    	d.css({
    		width:s+'px',
    		height:s+'px',
    		backgroundColor:c,
    		left:l+'px',
    		top:t+'px',
    		position:'absolute'
    	});
    	$("#wrap").append(d);
    	d.fadeOut(2000,function(){
    		this.remove();
    	});


    }
    createDiv();
    timer = setInterval(function(){
    createDiv();

},500);
</script>
</html>